<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>LCD 数字时钟</title>
<style>
  @font-face {
    font-family: 'LCD';
    src: url('../fonts/DSEG7Classic-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }

  .lcd-clock {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'LCD', monospace;
    font-size: 128px; /* 字体大小 */
    color: white;
    text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #fff;
    opacity: 0; /* 初始透明度为0 */
    transition: opacity 1s ease-in-out; /* 淡入淡出动画 */
  }

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .visible {
    opacity: 1; /* 完全显示 */
  }
</style>
</head>
<body>

<div class="container"><div class="lcd-clock" id="clock">00:00:00</div></div>

<script>
function updateClock() {
    var now = new Date();
    var hours = now.getHours().toString().padStart(2, '0');
    var minutes = now.getMinutes().toString().padStart(2, '0');
    var seconds = now.getSeconds().toString().padStart(2, '0');

    document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;

    // 检查是否为29分或59分30秒
    if ((minutes === '29' && seconds === '30') || (minutes === '59' && seconds === '30')) {
        showClock();
    }

    // 检查是否为30分或00分30秒（即60秒后）
    if ((minutes === '30' && seconds === '30') || (minutes === '00' && seconds === '30')) {
        hideClock();
    }
}

function showClock() {
    var clock = document.getElementById('clock');
    clock.classList.add('visible');
}

function hideClock() {
    var clock = document.getElementById('clock');
    clock.classList.remove('visible');
}

// 初始化时钟
updateClock();

// 每秒更新一次时钟
setInterval(updateClock, 1000);
</script>

</body>
</html>
